/*
 * @Description:
 * @Version: 2.0
 * @Autor: zhangjx
 * @Date: 2023-03-31 11:58:58
 * @LastEditors: uphldjx 1373577124@qq.com
 * @LastEditTime: 2024-05-20 10:58:54
 */
import { useCommonStore } from '@/stores/common'

import { ElPopover } from 'element-plus'
import { useDateFormat } from '@vueuse/core'
export default defineComponent({
	name: 'DictTags',
	props: {
		value: {
			type: [String, Number],
		},
		options: {
			type: Array,
		},
		code: {
			type: String,
		},
		column: {
			type: Object,
			default: () => ({}),
		},
		row: {
			type: Object,
			default: () => ({}),
		},
	},
	setup(props, { slots, attrs, emit }) {
		const { dictList } = storeToRefs(useCommonStore())

		const data = Array.isArray(dictList.value) ? dictList.value : dictList.value[props.code] || []
		const dicData = props.options || data

		const dictTags = dicData?.map((item) => {
			let style = {}
			switch (item.remarks || item.type) {
				case 'success':
					style = {
						background: 'rgba(0, 168, 112, 0.2)',
						color: '#00A870',
					}
					break
				case 'info':
					style = {
						background: 'rgb(0 0 0 / 16%)',
						color: '#1c1c28d1',
					}
					break
				case 'primary':
					style = {
						background: 'rgba(105, 158, 245, 0.2)',
						color: '#699EF5',
					}
					break
				case 'danger':
					style = {
						background: 'rgba(250, 62, 62, 0.2)',
						color: '#FA3E3E',
					}
					break
				case 'warning':
					style = {
						background: 'rgba(237, 123, 47, 0.2)',
						color: '#ED7B2F',
					}
					break
				case 'purple':
					style = {
						background: '#EFE4F8',
						color: '#8241B5',
					}
					break
				default:
					style = item.style || undefined
					break
			}
			return {
				...item,
				style,
			}
		})
		const dictValue = props.column.defaultValue?props.column.defaultValue: (Array.isArray(props.value) ? props.value : `${props.value}`)
		let dictValueList = []
		const dicTempList = dictTags
			.map((item) => {
				
				if (dictValue)
					if (typeof dictValue == 'string') {
						// 分割
						dictValueList = dictValue.split(',')
					}
				
				if (dictValueList.length == 1) {
					if (dictValueList[0] == item.label || dictValueList[0] == item.value ) {
						if (item.style) {
							return <el-tag style={{ ...item.style, border: 'none' }}>{item.label}</el-tag>
						} else {
							return <p class="mr8">{item.label}</p>
						}
					}
				} else if (dictValueList.length > 1) {
					
					let list = dictValueList.map((el) => {
						if (el == item.label || el == item.value) {
							if (item.style) {
								return <el-tag style={{ ...item.style, border: 'none' }}>{item.label}</el-tag>
							} else {
								return <p class="mr8">{item.label}</p>
							}
						}
					})
					return list
				}
			})
			.filter(Boolean)

		const tipContent = (content) => {
			if (props.column.tipProp) {
				let tip = props.row[props.column.tipProp]
				if (tip && props.column.tipProp) {
					const tipTime = useDateFormat(tip, 'YYYY.MM.DD')
					tip = tipTime.value
				}
				return (
					<ElPopover
						width={100}
						effect="dark"
						disabled={!tip}
						v-slots={{
							reference: () => <div>{content}</div>,
							default: () => (
								<div>
									<p class="fc">{props.column.tipLabel}</p>
									<p class="fc">{tip}</p>
								</div>
							),
						}}
					></ElPopover>
				)
			} else {
				return content
			}
		}
		return () => {
			if (dicTempList.length > 0) {
				return <div style="display:flex;flex-flow:row wrap;justify-content: center;gap:6px">{tipContent(dicTempList)}</div>
			} else if (props.value || props.value == 0) {
				return <span>{props.value}</span>
			} else {
				return <span>/</span>
			}
		}
	},
})
